<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<style type="text/css">
		.mui-table-view-cell {
				font-size: 10px;;
				line-height: 2;
		}
	
		</style>	
	</head>

	<body>
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
			<ul class="mui-table-view mui-table-view-chevron">

					
			</ul>
				
			</div>
		</div>
		<ui  style="display: none;" >
			<li   id="template" class="mui-table-view-cell">
				去详情页加载看webview加载远程url，页面切换类似微信浏览器
	 		</li>
	 	

		<script src="js/mui.min.js"></script>
		<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
     					 contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
      					contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
						auto:false,//可选,默认false.自动上拉加载一次 true
						callback: pulldownRefresh
					},
					up: {
						auto:false,//可选,默认true.自动上拉加载一次
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				},	
				preloadPages:[
				{
					 id:  "message_detail.html",
					 url: "message_detail.html",	
				}
				]
			});
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
				
					for(var i=0;i<6;i++){
						var nodet = document.getElementById("template").cloneNode(true);				
						table.appendChild(nodet);
						//table.insertBefore(document.getElementById("template"), table.firstChild);
					}
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
				}, 1000);
			}
			var count = 0;
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					var nodet = document.getElementById("template").cloneNode(true);
					table.appendChild(nodet);
					console.log("上拉刷新具体业务实现");
				}, 1500);
			}
			
			
			
			if (mui.os.plus) {
				mui.plusReady(function() {
					setTimeout(function() {
						mui('#pullrefresh').pullRefresh().pulldownLoading();
					}, 100);

				});
			} else {
				mui.ready(function() {
					mui('#pullrefresh').pullRefresh().pulldownLoading();
				});
					
			}
					
			///------------
		var i = 4582647720;
		var contentWebview = null;
			//去详情页
		function openMessageDetail () {
			if(contentWebview==null){
				 contentWebview = plus.webview.getWebviewById("message_detail.html");
			}
			i=i+1;
			
			mui.fire(contentWebview, 'refresh2',{mid:i});  
			
			console.log("openMessageDetail",i);
				
			 mui.openWindow({
			 	 id:  "message_detail.html",
				 url: "message_detail.html",	
				 show: {
							aniShow: 'none', //right zoom-fade-out
							autoShow:false,
							//duration:150
						},
				waiting: {
						autoShow: false,
						title:'正在加载...',//等待对话框上显示的提示内容
				},			  			
			});					
		}
		//点击侧滑图标，打开侧滑菜单；
	//	document.querySelector('.mui-table-view-cell').addEventListener('tap', openMessageDetail);
		mui(".mui-table-view").on('tap','.mui-table-view-cell',openMessageDetail)
		</script>
	</body>

</html>